<template>
  <view class="logistics_container">

    <view class="title">
      <text v-for="i in logisticsList.length" :key="i" :class="logisticsIndex === i ? 'active' : ''"
        @click="logisticsIndex = i">包裹{{ i + 1 }}
      </text>
    </view>

    <view class="logisticsName">
      <view>配送商：<text>{{ logisticsList[logisticsIndex].shipper }}</text> </view>
      <view>物流单号：
        <text>{{ logisticsList[logisticsIndex].logisticCode }}</text>
        <text @click="copy(logisticsList[logisticsIndex].logisticCode)">复制</text>
      </view>
    </view>

    <view class="logisticsInfo">
      <view v-for="(item, index) in logisticsList[logisticsIndex].traces" :key="index" class="item">
        <view>
          <text class="icon"></text>
          <text class="line"></text>
        </view>
        <view>
          <text class="opeTitle"> {{ item.opeTitle }} </text>
          <text class="opeRemark"> {{ item.opeRemark }} </text>
          <text class="opeTime"> {{ item.opeTime }} </text>
        </view>
      </view>
    </view>
    <view style="height:100rpx"></view>
  </view>
</template>

<script>
import { checkLogistics } from '@/api/order/index.js'

export default {
  components: {},
  data () {
    return {
      sn: '',
      logisticsList: [],
      logisticsIndex: 0,
    }
  },
  onLoad (e) {
    this.sn = e.sn
    this.getList()
  },
  methods: {
    copy (val) {
      uni.setClipboardData({ data: val })
    },
    getList () {
      checkLogistics(this.sn).then(res => {
        if (res.code === 200) {
          this.logisticsList = res.data
        }
        if (!res.data) {
          uni.navigateBack(1)
          uni.showToast({ icon: 'none', title: '没有物流信息', mask: true })
        }
      })
    },
  },

}
</script>

<style lang="scss" scoped>
.logistics_container {
  width: 100%;
  min-height: 100vh;
  background: #f9f9f9;

  .title {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    font-size: 32rpx;
    padding: 30rpx 0 23.06rpx 0;

    .active {
      color: #2770fb;
    }
  }

  .logisticsName {
    height: 219rpx;
    background: #ffffff;
    border-radius: 7rpx;
    margin: 0 25rpx;
    font-size: 29rpx;

    view {
      color: #8d8d8d;
      padding-left: 47.22rpx;
      padding-top: 51.39rpx;

      text {
        color: #000000;
      }

      text:nth-child(2) {
        display: inline-block;
        width: 69rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        background: #f9f9f9;
        border-radius: 7rpx;
        margin-left: 27.78rpx;
      }
    }
  }

  .logisticsInfo {
    margin: 0 25rpx;
    margin-top: 25rpx;
    padding: 70.14rpx 34.72rpx;
    background: #fff;

    .item {
      display: flex;
      flex-flow: row nowrap;
      color: #8d8d8d;
      position: relative;

      view {
        display: flex;
        flex-flow: column nowrap;
      }

      view:nth-child(2) {
        padding-left: 29.17rpx;
      }

      .icon {
        position: absolute;
        top: 8rpx;
        left: -10rpx;
        z-index: 10;
        width: 22.22rpx;
        height: 22.22rpx;
        background: #8d8d8d;
        border-radius: 50%;
      }

      .line {
        position: absolute;
        top: 8rpx;
        left: 0;
        display: inline-block;
        width: 2rpx;
        height: 100%;
        background: #8d8d8d;
      }

      .opeTitle,
      .opeRemark,
      .opeTime {
        font-size: 29rpx;
        margin-bottom: 24.31rpx;
      }

      .opeTime {
        font-size: 25rpx;
      }
    }

    .item:last-child {
      padding: 0;
    }

    .item:first-child {
      .icon {
        background: url("https://www.xdyy100.com/wholesale/files/mp/static/personalCenter/icon.png")
          no-repeat;
        background-size: 22.22rpx;
      }

      .opeTitle {
        color: #2871fc;
      }

      .opeRemark {
        color: #000;
      }
    }
  }
}
</style>
